<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .active,:focus{
            outline: none !important;
            box-shadow: none !important;
        }
    </style>

</head>

<body>
<div class="container mt-1">
    <div class="col-6">
        <button class="btn btn-sm btn-primary">primary</button>
        <button class="btn btn-sm btn-info">info</button>
        <button class="btn btn-sm btn-success">success</button>
        <button class="btn btn-sm btn-danger">danger</button>
        <button class="btn btn-sm btn-warning">warning</button>
    </div>

    <div class="row mt-2">
        <nav>
            <ul class="pagination pagination-sm">
                <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">2</a></li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
        </nav>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
